<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="../ext-3.4.0/resources/css/ext-all.css" type="text/css" rel="stylesheet" />
        <script language="javascript" src="../ext-3.4.0/adapter/ext/ext-base.js">
        </script>
        <script language="javascript" src="../ext-3.4.0/src/locale/ext-lang-zh_CN.js">
        </script>
        <script language="javascript" src="../ext-3.4.0/ext-all.js">
        </script>
        <title>添加信息</title>
        <script language="javascript">
            Ext.onReady(function(){
                var _window = new Ext.Window({
                    title: '添加信息',
                    width: 500,
                    height: 350,
                    plain: true,
                    resizable: false,
                    minimizable: true,
                    maximizable: true,
                    language: 'zh_cn',
                    items: [{
                        baseCls: 'x-plain',
                        style: 'padding:10px',
                        layout: 'column',
                        plain: true,
                        items: [{
                            columnWidth: 0.5,
                            baseCls: 'x-plain',
                            layout: 'form',
                            labelWidth: 60,
                            defaults: {
                                xtype: 'textfield',
                                width: 100
                            },
                            items: [{
                                fieldLabel: '姓名'
                            }, {
                                fieldLabel: '性别',
                                xtype: 'combo',
                                mode: 'local',
                                store: new Ext.data.ArrayStore({
                                    fields: ['sex', 'value'],
                                    data: [['0', '男'], ['1', '女']]
                                }),
                                displayField: 'value',
                                triggerAction: 'all',
                                emptyText: '请选择性别'
                            }, {
                                fieldLabel: '年龄',
                                xtype: 'numberfield'
                            }, {
                                xtype: 'datefield',
                                fieldLabel: '出生日期',
                                format: 'Y-m-d',
                                disabled: false,
                                startValue: '1980-01-01'
                            }, {
                                fieldLabel: '联系电话'
                            }, {
                                fieldLabel: '手机号码'
                            }, {
                                fieldLabel: '电子邮件'
                            }]
                        }, {
                            columnWidth: 0.5,
                            baseCls: 'x-plain',
                            layout: 'form',
                            lableWidth: 25,
                            items: [{
                                xtype: 'label',
                                text: '个人相片'
                            }, {
                                xtype: 'panel',
                                
                                width: 150,
                                height: 150,
                                html: '<img src="../ext-3.4.0/docs/resources/extanim64.gif">'
                            }                /*
                             {
                             xtype:'box',
                             width:150,
                             height:150,
                             autoEl:{
                             tag:'img',
                             src:'../ext-3.4.0/docs/resources/extanim64.gif'
                             }
                             }
                             */
                            ]
                        }],
                        listeners: {}
                    }, {
                        layout: 'form',
                        baseCls: 'x-plain',
                        style: 'padding:10px',
                        labelWidth: 60,
                        defaults: {
                            xtype: 'textfield',
                            width: 390,
                            anchor: '95%'
                        },
                        items: [{
                            fieldLabel: '证件号'
                        }, {
                            fieldLabel: '地址'
                        }, {
                        
                            xtype: 'panel',
                            baseCls: 'x-plain',
                            layout: 'column',
                            columnWidth: 0.5,
                            
                            items: [{
                                layout: 'form',
                                baseCls: 'x-plain',
                                labelWidth: 60,
                                items: [{
                                    fieldLabel: '职位',
                                    xtype: 'combo',
                                    mode: 'local',
                                    displayField: 'value',
                                    triggerAction: 'all',
                                    emptyText: '请选择职位',
                                    selectRecord: null,
                                    store: new Ext.data.ArrayStore({
                                        fields: ['job', 'value'],
                                        data: [['gongchengshi', '工程师'], ['xiangmujinli', '项目经理']]
                                    }),
                                    listeners: {
                                        'select': function(combo, record, index){
                                            combo.selectRecord = record;
                                            //Ext.MessageBox.alert(record.get('value'));
                                        }
                                    }
                                }]
                            }, {
                                style: 'padding:0px 0px 0px 10px',
                                items: {
                                    xtype: 'button',
                                    text: '添加职位',
                                    listeners: {
                                        'click': function(){
                                            var _panel = this.ownerCt.ownerCt;
                                            var _job = _panel.findByType('combo')[0];
                                            Ext.MessageBox.prompt('职位添加', '请输入职位名称', function(btn, text){
                                                if (btn == 'ok') {
                                                    //获取数据源
                                                    var _store = this.getStore();
                                                    var _recordJob = new Ext.data.Record.create({
                                                        name: 'job',
                                                        type: 'string'
                                                    }, {
                                                        name: 'value',
                                                        type: 'stirng'
                                                    });
                                                    var _record = new _recordJob({
                                                        job: text,
                                                        value: text
                                                    });
                                                    _store.insert(0, [_record]);
                                                    //	_store.addSorted(new Ext.data.Record({fields:['job','value'],data:[[text,text]]}));
                                                    
                                                    this.setValue(text);
                                                    
                                                }
                                            }, _job);
                                            
                                        }
                                    }
                                }
                            }, {
                                style: 'padding:0px 0px 0px 10px',
                                items: {
                                    xtype: 'button',
                                    text: '修改职位',
                                    listeners: {
                                        'click': function(){
                                            var _panel = this.ownerCt.ownerCt;
                                            var _job = _panel.findByType('combo')[0];
                                            var _record = _job.selectRecord;
                                            if (_record == null) {
                                                return;
                                            }
                                            Ext.MessageBox.prompt('职位修改', '请输入职位名称', function(btn, text){
                                                if (btn == 'ok') {
                                                    //获取数据源
                                                    var _record = _job.selectRecord;
                                                    _record.set('value', text);
                                                    _record.commit();
                                                    _job.setValue(text);
                                                }
                                            }, _job, false, _job.getValue());
                                        }
                                    }
                                }
                            }, {
                                style: 'padding:0px 0px 0px 10px',
                                items: {
                                    xtype: 'button',
                                    text: '删除职位',
                                    listeners: {
                                        'click': function(){
                                            var _panel = this.ownerCt.ownerCt;
                                            var _job = _panel.findByType('combo')[0];
                                            Ext.MessageBox.confirm('删除', '是否确认删除', function(btn){
                                                var _record = _job.selectRecord;
                                                if (btn == 'yes' && _record != null) {
                                                
                                                    _job.store.remove(_record);
                                                    _job.selectRecord = null;
                                                    _job.setValue('');
                                                    Ext.MessageBox.alert("删除成功");
                                                }
                                            });
                                        }
                                    }
                                }
                            }]
                        
                        }]
                    }],
                    listeners: {},
                    keys: [{
                        key: 13,
                        ctrl: true,
                        fn: function(keyCode, evt){
                            alert("press ctrl + enter");
                        }
                    }]
                
                });
                
                _window.show();
                
//                var _keyMap = new Ext.KeyMap(_window.getEl(), {
//                    key: 13,
//                    ctrl: true,
//                    fn: function(keyCode, evt){
//                        alert("press ctrl + enter");
//                    }
//                })
                
            });
        </script>
    </head>
    <body>
    </body>
</html>
